<template>
  <div class="container" @click="handleNav">
    <HeaderBar></HeaderBar>

    <div class="main">
      <transition :name="transitionname">
        <router-view></router-view>
      </transition>
    </div>

    <ul class="footer">
      <router-link tag="li" to="/home/movie">
        <span class="iconfont icondianying"></span>
        电影/影院
      </router-link>
      <router-link tag="li" to="/home/video">
        <span class="iconfont iconplay"></span>
        视频
      </router-link>
      <router-link tag="li" to="/home/shortvideo">
        <span class="iconfont iconplay1"></span>
        小视频
      </router-link>
      <li>
        <span class="iconfont icondianyingpiao"></span>
        <a href="/performance.html">演出</a>
      </li>
      <router-link tag="li" to="/home/my">
        <span class="iconfont iconicon-test"></span>
        我的
      </router-link>
    </ul>

  </div>
</template>

<script>
import HeaderBar from "../components/HeaderBar"
import { mapMutations } from "vuex"
export default {
  data() {
    return {
      transitionname: "slide-left"
    }
  },
  components: {
    HeaderBar
  },
  methods: {
    ...mapMutations(["setShowNav"]),
    handleNav() {
      this.setShowNav(false)
    }
  },
   watch: {
        '$route'(to, from) {
          console.log('to:',to.meta.order)
          console.log('form:',from.meta.order)
          if (to.meta.order > from.meta.order) {
            this.transitionname = 'slide-right'
          } else {
            this.transitionname = 'slide-left'
          }
        }
      }
}
</script>

<style lang="scss" scoped>

.slide-left-enter,
    .slide-right-leave-to
    {
      opacity: 0;
      transform: translateX(-100%);
    }

    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active
    {
      transition: all .3s;
    }

    .slide-left-leave-to,
    .slide-right-enter
    {
      opacity: 0;
      transform: translateX(100%);
    }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .footer {
    height: 50px;
    display: flex;
    li {
      flex: 1;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 12px;
      span::before {
        font-size: 25px;
      }
    }
    .router-link-active {
      color: orange;
    }
  }
}
</style>


